<template>
    <div class="maindiv">

  <el-row :gutter="20">
    <!-- <el-col :span="6"><el-card>目录</el-card></el-col> -->
    <el-col :span="24"><el-card>
        <el-collapse v-model="activeName" accordion>
  <el-collapse-item title="中国航协民航英语在线学习正式推出" name="1">
    <div>在全球抗疫的关键时期,中国航协积极响应国家防控期间不停教不停学的号召</div>
    <div>为有效支撑民航企业员工的自主学习和技能提升,助力民航院校在校学生加强实用技能学习的针对性...</div>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  详情
</el-button>
  </el-collapse-item>
  <el-collapse-item title="国际航协:5月份客运需求跌幅略改善" name="2">
    <div>国际航空运输协会(IATA,以下简称“国际航协”)最新的全球航空客运定期数据显示,</div>
    <div>同比2019年5月份,今年5月份全球航空客运需求(按照收入客公里或RPKs计算)暴跌91.3%,但...</div>
     <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  详情
</el-button>
  </el-collapse-item>
  <el-collapse-item title="国际航协提出国际旅行隔离替代方案" name="3">
    <div>国际航空运输协会(IATA,以下简称国际航协)敦促各国政府在经济重启时避免采取隔离措施。</div>
    <div>国际航协正在推动采取分级措施,降低各国通过航空运输传播新冠肺炎病毒的风险,减少...</div>
     <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  详情
</el-button>
  </el-collapse-item>
  <el-collapse-item title="中国航协:坚决反对侵害消费者权益行为" name="4">
    <div>针对近期社会公众和业界反应较多的有关国际机票价格上涨和“天价机票”问题,中国航协航空运</div>
    <div>输销售代理分会负责人10日表示,坚决反对个别客运代理人侵害消费者权益、违规... </div>
     <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  详情
</el-button>
  </el-collapse-item>
</el-collapse>
        
        
        
     
        </el-card></el-col>
  </el-row>

<el-drawer
  title="此处是新闻标题"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>新闻内容</span>
</el-drawer>
    </div>
</template>
<style lang="less" scoped>
.maindiv{
height: 100%;
width: 100%;

}
.el-header{
width: 100%;
height: 200px;
}
.el-aside{
width: 100%;
height: 200px;


}
.el-card{
border-radius: 30px

}

.headcard{

    height: 100px;
}
.asidecard{
height: 100%;

}
</style><script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>